<template>
  <div>
    <!-- 表格操作 -->
    <el-table  :data="resList" style="width: 100%">
      <el-table-column label="店铺名称" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.category }}</span>
        </template>
      </el-table-column>
      <el-table-column label="店铺地址" width="380">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>店铺名称: {{ scope.row.category }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.address }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="店铺介绍" width="260">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>店铺名称: {{ scope.row.description }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.description }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="del(scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
    class="fy"
      :current-page="pageNum"
      :page-size="pageSize"
      background
      layout="prev, pager, next"
      @current-change="change"
      :total="list.length"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      pageNum: 1,
      pageSize: 5,
    };
  },
  methods: {
    // 点击页码分页
    change(val) {
      this.pageNum = val;
    },
    del(index) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.list.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.$axios.get("/shopList.json").then((res) => {
      this.list = res.data;
    });
  },
  // 分页
  computed: {
    resList() {
      return this.list.slice(
        this.pageSize * (this.pageNum - 1),
        this.pageSize * this.pageNum
      );
    },
  },
};
</script>
<style scoped>
.fy{
  margin-top: 20px;
}
</style>